<template>
    <div class="swiperContainer">
      <!-- swiper -->
      <swiper :options="swiperOption">
        <swiper-slide v-for="(item,index) in images" :key="index">
            <img :src="item" alt="">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </div>
</template>

<script>
 export default {
    name: "MySwiper", 
    data() {
      return {
        swiperOption: {
          /* 图片之间有间隔宽度 */
          // spaceBetween: 30, 
          centeredSlides: true,
          loop: true,
          autoplay: {
              delay: 2500,
              disableOnInteraction: false
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            }
        },
        // 不能写到swiperOption{} 数据层不能写在一起,必须独立隔开
        swiper: null,
        images: [require("../../assets/images/swiperImg/1.jpg"),require("../../assets/images/swiperImg/2.jpg"),require("../../assets/images/swiperImg/3.jpg"),require("../../assets/images/swiperImg/4.jpg")],
      }
    }
  }

</script>

<style lang="less" scoped>
// 这个组件默认是紧紧地贴在SearchBar的下面,因为都是块级元素
    .swiperContainer{
        width: 6.9rem;
        height: 3rem; 
        margin: -1rem 0.3rem 0 0.3rem;
        border-radius: 0.3rem; 
        overflow: hidden; //必须加否则最外层出现瞬间直角情况,超出设置部分隐藏！ 
       
        .swiper-button-prev, .swiper-button-next{
          width: 0.27rem;
          height: 0.3rem;
          background-size: 0.27rem 0.3rem; 
          margin-top: -0.15rem;
        
        }
        .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
          bottom: 0.3rem;
        }
    }
    .swiperContainer img{
        width: 6.9rem;
        height: 3.21rem;
        border-radius: 0.3rem; 
        border: none;
    }
   
    // 一定到拿本身自带的类否则无效果出现
    /* .swiperContainer.swiper-button-prev{
        width: 0.4rem;
        height: 0.58rem;
    }
    .swiperContainer.swiper-button-next{
        width: 0.4rem;
        height: 0.58rem;
    } */
</style>